import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import './App.scss'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import Edit from './pages/Profile/Edit'
import Chat from '@/pages/Profile/Chat'
import Search from '@/pages/Search'
import Result from '@/pages/Search/Result'

import AuthRoute from './components/AuthRoute'
// import Article from './pages/Article'

import { lazy, Suspense } from 'react'
import KeepAlive from './components/KeepAlive'
import Test from './pages/Test'

const Article = lazy(() => import('@/pages/Article')) // 懒加载

// const Xxx = () => import('xxxx')

// {
//   path: '/xxx',
//   component: Xxx
// }

export default function App() {
  return (
    <div className="app">
      {/* KeepAlive替代之前的Route，会比Route好用，路由匹配失败，组件不卸载，而是none */}
      {/* 用了KeepAlive以后， 他的效果和Route的效果一样， 不同的是将来这个组件不会被卸载了， 而是显示隐藏 */}
      {/* <KeepAlive path="/test" component={Test}></KeepAlive> */}

      {/* 不能放在switch中 因为有多个组件需要展示！！ */}
      <KeepAlive path="/home" component={Layout}></KeepAlive>

      {/* App */}
      {/* <Layout></Layout>
      <Login></Login> */}
      {/* Suspense为懒加载过程中提供一个兜底的结构 */}
      <Suspense fallback={<div style={{ color: 'red' }}>正在加载中。。。</div>}>
        <Switch>
          {/* 重定向的玩法一： */}
          <Route path="/" exact>
            <Redirect to="/home"></Redirect>
          </Route>

          {/* 重定向的玩法二： 适用于跳转前有复杂逻辑 */}
          {/* <Route path='/' exact render={() => {
          if(!token) return <Redirect to="/login"></Redirect>
          return <Redirect to="/home"></Redirect>
        }}></Route> */}

          {/* <Route path="/home" component={Layout}></Route> */}
          <Route path="/login" component={Login}></Route>

          {/* 需求： 对个人信息页面进行登录访问控制 */}
          {/* <Route a="aa" b="bb" c="cc" exact path="/profile/edit" component={Edit}></Route> */}
          {/* 封装的小要求： 我希望AuthRoute组件使用姿势和Route组件大致相同！！！ */}
          <AuthRoute path="/profile/edit" component={Edit}></AuthRoute>
          <AuthRoute path="/chat" component={Chat}></AuthRoute>
          <Route path="/search" component={Search} exact></Route>

          <Route path="/search/result" component={Result}></Route>
          <Route path="/article/:id" component={Article}></Route>
        </Switch>
      </Suspense>
    </div>
  )
}
